import BaseAlter from "./BaseAlter";
import Vue from "vue";

/**
 * 手动挂载vue实例,添加了一个方法 newInstance
 * 在 notification.js 的 new Vue 时，使用了 Render 函数来渲染 alert.vue，这是因为使用 template 在 runtime 的 Vue.js 版本下是会报错的
 */
BaseAlter.newInstance = properties => {
  const props = properties || {};

  const Instance = new Vue({
    data: props,
    render: h => {
      return h(BaseAlter, {
        props: {
          count: {
            type: Number,
            default: 3
          }
        }
      });
    }
  });

  //用 $mount 挂载到 body 节点下
  const component = Instance.$mount();
  document.body.appendChild(component.$el);

  const alert = Instance.$children[0]; //根实例中查找组件
  console.log(alert, "这里的 alert 就是 Render 的 Alert 组件实例");
  console.log(alert);

  //使用闭包暴露了两个方法 add 和 remove，这里的 add 和 remove 可不是 alert.vue 里的 add 和 remove，它们只是名字一样
  return {
    add(notice) {
      alert.add(notice); //调用alter组件中的方法
    },
    remove(name) {
      alert.remove(name);
    }
  };
};

export default BaseAlter;
